<!-- 客户列表-->
<template>
  <div class="customer-list">
    <el-form :inline="true" :model="ruleForm" ref="ruleForm">
      <el-form-item label="城市：" prop="cityId">
        <el-select filterable v-model="ruleForm.cityId" placeholder="请选择">
          <el-option
            v-for="item in cityList"
            :key="item.cityId"
            :label="item.city"
            :value="item.cityId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户：" prop="searchContent">
        <el-input v-model="ruleForm.searchContent" placeholder="请输入姓名/手机号"></el-input>
      </el-form-item>
      <el-form-item label="客户最新状态：" prop="followType">
        <el-select filterable  v-model="ruleForm.followType" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户来源：" prop="customerSource">
        <el-select filterable  v-model="ruleForm.customerSource" placeholder="请选择">
          <el-option
            v-for="item in sourceList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="resetForm('ruleForm')">重置</el-button>
        <el-button @click="batchAllocation">批量分配</el-button>
        <el-button @click="customerInput">客户录入</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table  ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" :selectable="disabled" width="55"></el-table-column>
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="customerName" label="客户姓名"></el-table-column>
      <el-table-column align="center" prop="customerPhone" label="客户手机号"></el-table-column>
      <el-table-column align="center" :formatter="customerSource" prop="customerSource" label="客户来源"></el-table-column>
      <el-table-column align="center" prop="customFollowTypeName" label="客户最新状态" :formatter="initstatus"></el-table-column>
      <el-table-column align="center" prop="brokerName" label="最新跟进人"></el-table-column>
      <el-table-column align="center" prop="brokerPhone" label="跟进人手机号"></el-table-column>
      <el-table-column align="center" label="详细信息">
        <template slot-scope="scope">
        <el-button @click="handleClick(scope.row.noHiddenPhone)" type="text" size="small">查看</el-button>
      </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="ruleForm.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="ruleForm.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
    <!-- 客户录入 -->
    <el-dialog title="客户录入" :visible.sync="dialogFormVisible" width="700px">
      <el-form  ref="form" :model="form" :rules="inputRules" label-width="150px">
        <el-form-item label="客户姓名：" prop="customerName" >
          <el-input placeholder="请输入客户姓名" v-model="form.customerName"  auto-complete="off" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="客户手机号：" prop="customerPhone" >
          <el-input placeholder="请输入客户手机号" v-model="form.customerPhone" auto-complete="off" style="width: 300px;"></el-input>
        </el-form-item>
        <el-form-item label="客户性别：" prop="customerSex" >
          <el-radio-group v-model="form.customerSex">
            <el-radio label="0">先生</el-radio>
            <el-radio label="1">女士</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="客户来源：" prop="customerSource">
          <el-select filterable  v-model="form.customerSource" placeholder="请选择客户来源" style="width: 300px;">
            <el-option label="运营录入" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取消</el-button>
        <el-button type="primary" @click="saveInput('form')">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量分配 -->
    <el-dialog title="批量分配" :visible.sync="dialogBatch" width="700px">
      <el-form :label-position="'top'" :model="batchForm">
          <div>
            <el-select v-model="brokerType" placeholder="请选择" style="width: 400px" @change="
             selectchange">
                <!-- <el-option label="置业顾问" value="6"></el-option> -->
                <el-option label="职业经纪人" value="3"></el-option>
                <el-option label="项目助理" value="4"></el-option>
              </el-select>
          </div>
          <div v-if="brokerType == 4" style="margin-top: 10px;">
            <el-select filterable v-model="cityId" placeholder="请选择城市" @change="selectCity">
              <el-option
                v-for="(item,index) in cityList"
                :key="index"
                :label="item.city"
                :value="item.cityId">
              </el-option>
            </el-select>
            <el-select filterable v-model="devId" placeholder="请选择楼盘" @change="brokerId=''">
              <el-option
                v-for="(item,index) in devList"
                :key="index"
                :label="item.devName"
                :value="item.devId">
              </el-option>
            </el-select>
          </div>
          <div style="margin-top: 10px;">
            <el-select v-model="brokerId" style="width: 400px" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod"
              :loading="loading">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
              </el-select>
          </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearSaveBatch">取消</el-button>
        <el-button type="primary" @click="saveBatch">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api/apiPath'
import utils from "@/common/utils.js";
export default {
  name: 'customerList',
  title:'客户列表',
  data() {
    const checkPhone = (rule,value,callback) => {
        if(!value) {
            return callback(new Error('手机号不能为空'));
        }
        callback()
    }
    return {
      form: {
        customerName: '',
        customerPhone: '',
        customerSex: '0',
        customerSource: '1'
      },
      loading: false,
      brokerType: '3',//3职业经纪人 4项目助理
      cityId:'',//批量分配弹框 项目助理城市id
      devId:'',//批量分配弹框 城市id
      devList:[],//批量分配楼盘list
      brokerId: [],
      options: [],
      cityList: [],
      time: [],
      ruleForm: {
        cityId: '',
        searchContent: '',
        followType: '',
        customerSource: '',
        pageSize: 10,
        pageNum: 1,
      },
      batchForm: {

      },
      tableData: [],
      statusList: [
        {
          value: 1, 
          label: '报备'
        },
        {
          value: 2, 
          label: '带看'
        },
        {
          value: 3, 
          label: '认购'
        },
        {
          value: 4, 
          label: '签约'
        },
        {
          value: 5, 
          label: '认筹'
        },
        {
          value: 9, 
          label: '草签'
        },
        {
          value: 10, 
          label: '结佣'
        },
        {
          value: -1024, 
          label: '未跟进'
        },
        {
          value: 8, 
          label: '退认购'
        },
        {
          value: 7, 
          label: '退认筹'
        },
        {
          value: 11, 
          label: '签约退房'
        },
        {
          value: 13, 
          label: '退房'
        }
      ],
      sourceList: [
        {
          value:'',
          label:'全部'
        },
        {
          value: 8,
          label: '认筹下单'
        },
        {
          value: 2,
          label: '扫码录入'
        },
        {
          value: 6,
          label: '网络推客录入'
        },
        {
          value: 0,
          label: '经纪人录入'
        },
        {
          value: 1,
          label: '运营录入'
        },
        {
          value: 9,
          label: '预约看房'
        },
        {
          value: 11,
          label: '网络推客-集团小程序'
        },
        {
          value: 13,
          label: '认购录入'
        }
      ],
      total: 0,
      dialogFormVisible: false,
      dialogBatch: false,
      multipleSelection: [],
      inputRules: {
        customerName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
        ],
        customerPhone: [
          {validator: checkPhone, trigger: 'blur',required: true}
        ],
      }
    }
  },
  methods: {
    selectchange(){
      this.brokerId='';
      this.options=[];
      if (this.brokerType == 4) {
        this.cityId = '';
        this.devId = '';
      }
    },
    selectCity(){
      this.brokerId =''
      this.devId = '';
      this.getSelectDev();
    },
    getSelectDev(){
      this.axios.post(api.getSaleList,{cityId:this.cityId}).then(res=>{
        this.devId = '';
        this.devList = res.data.data
      })
    },
    customerSource(row) {
      if(row.customerSource == 1) {
        return '运营录入'
      }
      if(row.customerSource == 2) {
        return '扫码录入'
      }
      if(row.customerSource == 0) {
        return '经纪人录入'
      }
      if(row.customerSource == 6) {
        return '网络推客录入'
      }
      if(row.customerSource == 8) {
        return '认筹下单'
      }
      if(row.customerSource == 9) {
        return '预约看房'
      }
      if(row.customerSource == 11) {
        return '网络推客-集团小程序'
      }
      if(row.customerSource == 13) {
        return '认购录入'
      }
    },
    handleClick(val) {
      this.$router.push({path: '/customerDetail',query: {noHiddenPhone:val}})
    },
    // 是否可选
    disabled(row,index) {
      if (row.allocation == 0 && row.crmFlag == 0) {
        return true
      }else{
        return false
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getCity() {
      this.axios.post(api.GETCITY,{}).then(res => {
        if (res.data.code === 200) {
          this.cityList = res.data.data.cityList;
          this.cityList.unshift({id:undefined,city:'全部'});
        }
      });
    },
    list() {
      this.axios.post(api.pageCustomer,this.ruleForm).then(res => {
        if(res.data.code === 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
        }
      })
    },
    onSearch() {
      this.ruleForm.pageNum = 1;
      this.ruleForm.pageSize = 10;
      this.list()
    },
    cancel(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    initstatus(row, column, cellValue, index){
      if (row.crmFlag == 1) {
        if(row.followType > 1){
          return row.customFollowTypeName + '\n' + '来源：明源CRM';
        } else {
          return row.customFollowTypeName;
        }
      } else {
        return row.customFollowTypeName;
      }
    },
    resetForm(formName) {
      this.ruleForm.pageSize = 10;
      this.ruleForm.pageNum = 1;
      this.$refs[formName].resetFields();
      this.list();
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.list()
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.list();
    },
    // 客户录入
    customerInput() {
      this.dialogFormVisible = true;
    },
    saveInput(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post(api.customerSave,this.form).then(res => {
            if(res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg
              })
              this.$refs[formName].resetFields()
              this.dialogFormVisible = false;
              this.list()
            } else {
              this.$message.error(res.data.msg)
            }
          })
        } 
      })
    },
    remoteMethod(query) {
       if (this.brokerType == 3) {
          this.axios.post(api.listNoPage,{brokerName:query,brokerType:this.brokerType}).then(res => {
            this.options = []
            let arr = res.data.data
            arr.forEach(item => {
              let obj = {}
              if (this.brokerType == 6) {
                obj.value = item.id
                obj.label = item.brokerName + '(' + (item.easylifeEmployeeCode || '') + ')-' + item.cityName
                this.options.push(obj)
              }else{
                obj .value = item.id
                obj.label = item.brokerName + '(' + item.brokerPhone + ')-' + item.cityName
                this.options.push(obj)
              }
            })
          })
       }else{
        if (this.devId == '') {
           return this.$message({
            type: 'warning',
            message: '请选择楼盘'
          })
        }
        this.$axios.post('/cms/customerEntering/devUsers',{devId:this.devId,userName:query}).then(res=>{
          this.options = []
          let arr = res
          arr.forEach(item => {
            let obj = {}
            obj.value = item.id
            obj.label = item.userName + '(' + item.mobile + ')-' + item.city
            this.options.push(obj)
          })
        })
       } 
    },
    // 批量分配
    batchAllocation() {
      if(this.multipleSelection.length === 0) {
        return this.$message({
          type: 'warning',
          message: '请选择客户'
        })
      } else {
        this.dialogBatch = true;
      }
    },
    saveBatch() {
      //项目助理楼盘id不能为空 v2.10
      if ( this.brokerType == '4' && this.devId == '') {
          console.log( typeof(this.brokerType),this.devId)
         return this.$message({
          type: 'warning',
          message: '请选择楼盘'
        })
      }
      if(this.brokerId == '') {
        return this.$message({
          type: 'warning',
          message: '请输入关键词'
        })
      }
      let arrtemp = [];
      this.multipleSelection.forEach(item => {
        arrtemp.push(item.cuId + ';' + item.brokerPhone)
      })

      let obj ={}
      obj.brokerId = this.brokerId
      obj.customerIds = arrtemp
      if (this.brokerType == '4') {
         obj.allotType = 1
         obj.devId = this.devId
      }else {
         obj.allotType = 0
      }
      this.axios.post(api.allotInsert,obj).then(res => {
        if(res.data.code === 200) {
           this.$message({
             type: 'success',
             message: '操作成功'
           })
           this.dialogBatch = false;
           this.brokerType = '3';
           this.brokerId = '';
           this.list()
        }else {
          this.$message.error(res.data.msg)
        }
      })
    },
    clearSaveBatch() {
      this.dialogBatch = false;
      this.brokerType = '3';
      this.brokerId = '';
    }
  },
  created() {
    this.list();
    this.getCity();
    this.getSelectDev();//获取楼盘
  },
  acivated(){
    this.onSearch()
  }

}
</script>
<style lang="stylus">
.customer-list {
  .saveInput {
    width:300px;
  }
  .el-table .cell {
    text-align: center;
    white-space: pre-line;/*保留换行符*/
  }
}
</style>